<!--处置进度-->
<script setup>
import { useOderDispose } from '@/composables/useOderDispose.js'
import { TimeLineProcessType } from '@/utils/config.js'
import dayjs from 'dayjs'
import LinkMan from '@/views/workOrder/components/LinkMan.vue'
import FileList from '@/components/FilePreviewer/FileList.vue'
import PlanItem from '@/views/dispose/components/PlanItem.vue'
import { useRouter } from 'vue-router/composables'
import ContentBox from '@/views/dispose/components/ContentBox.vue'
import { handleFileData } from '@/utils/helper.js'

const { processList, getOrderProcessData } = useOderDispose()
const router = useRouter()
const orderNo = ref('')
const refreshLoading = ref(false)
onMounted(async () => {
  orderNo.value =
    router.currentRoute.query.orderNo ||
    localStorage.getItem('currentOrderNo') ||
    ''
  await initData()
})
const initData = async () => {
  await getOrderProcessData({
    orderNo: orderNo.value
  })
  refreshLoading.value = false
}
</script>

<template>
  <div
    class="bg-white w-full h-full overflow-y-auto overflow-x-hidden px-12px py-16px box-border"
  >
    <van-pull-refresh v-model="refreshLoading" @refresh="initData">
      <van-steps
        active-color="#36b374"
        inactive-color="#36b374"
        direction="vertical"
      >
        <van-step v-for="item in processList" :key="item.id">
          <template #active-icon>
            <img
              class="w-18px h-18px"
              src="@/assets/img/icon_linePoint.svg"
              alt=""
            />
          </template>
          <template #inactive-icon>
            <img
              class="w-18px h-18px"
              src="@/assets/img/icon_linePoint.svg"
              alt=""
            />
          </template>
          <template #finish-icon>
            <img
              class="w-18px h-18px"
              src="@/assets/img/icon_linePoint.svg"
              alt=""
            />
          </template>
          <div class="relative">
            <div class="flex items-center justify-between">
              <h3 class="m-0 text-16px font-600 leading-22px text-#171A1D">
                舆情工单{{ TimeLineProcessType[item?.type] }}
              </h3>
              <span class="text-14px font-400 leading-20px text-#71747A">{{
                dayjs(item.createTime).format('YYYY-MM-DD HH:mm')
              }}</span>
            </div>
            <PlanItem
              v-if="item?.status !== 'WAIT'"
              :label="item?.type !== 'RESPONSE' ? '处理时间' : '响应时间'"
              :content="
                item?.updateTime
                  ? dayjs(item?.updateTime).format('YYYY-MM-DD HH:mm:ss')
                  : ''
              "
            />
            <PlanItem
              v-if="
                item?.status !== 'WAIT' &&
                item.type !== 'CREATE' &&
                item.type !== 'FEEDBACK_RESPONSE'
              "
              :label="item?.type !== 'RESPONSE' ? '处理时长' : '响应时长'"
              :content="item.spendingTimeStr"
            />
            <PlanItem
              :label="item?.type !== 'RESPONSE' ? '处理单位' : '响应单位'"
              :content="item.orgName"
            />
            <PlanItem
              v-if="
                item?.status !== 'WAIT' &&
                item?.status &&
                item?.type === 'AUDITING'
              "
              label="审核结果"
            >
              <span
                :class="item?.status === 'POSITIVE' ? 'text-primary' : 'text-red'"
                class="font-bold"
              >
                {{ item?.status === 'POSITIVE' ? '通过' : '不通过' }}
              </span>
            </PlanItem>
            <PlanItem
              v-if="item?.status !== 'WAIT'"
              :label="item?.type !== 'RESPONSE' ? '处理人员' : '响应人员'"
            >
              <LinkMan
                :user-mobile="item?.userMobile"
                :user-name="item?.userName"
              />
            </PlanItem>
            <PlanItem
              v-if="item?.status !== 'WAIT' && item?.type !== 'RESPONSE'"
              label="处理内容"
            >
              <ContentBox
                :content="item.content"
                :at-org-obj="item?.atOrgObj"
                :timeout-days="item.timeoutDays"
              />
            </PlanItem>
            <PlanItem v-if="item?.attachment?.length" label="附件">
              <FileList
                :files="handleFileData(item?.attachment) || []"
                :upload="false"
                :preview="true"
              />
            </PlanItem>
          </div>
        </van-step>
      </van-steps>
    </van-pull-refresh>
  </div>
</template>

<style scoped lang="less"></style>
